<template>
    <div class="tools">
    <div class="tools-box">
      <div class="tools-select" v-for="item in toolsArr">
        <h2>{{ item[0] }}</h2>
        <div class="tools-list">
          <router-link v-for="val in item[1]" :to="{ path: '/tools-page/'+val.id }" class="tools-alone" tag="div">
            <figure>
                <img :src="val.tmb" :title="val.title">
            </figure>
            <div class="intro">
              <div>
                <h4>{{ val.title }}</h4>
                <p>{{ val.intro }}</p>
                <span>较适用于：{{ val.apply }}</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 渲染数据
  data () {
    return {
      toolsArr: {}
    };
  },
  // TODO: DOM加载完成后的钩子
  created: function () {
    this.getHttp();
  },
  // 引入组件
  components: {},
  // 自定义函数方法
  methods: {
    getHttp: function () {
      this.$http({
        method: 'get',
        url: '/api/sell/admin.php/myApi/getToolsList'
      }).then((response) => {
        this.toolsArr = response.data;
      }, (error) => {
        console.log(error);
      });
    }
  }
};
</script>
<style lang="scss">
@import '../../common/scss/fun.scss';

.tools{
  margin: 0;
  display: flex;
  justify-content: space-around;

  .tools-box{
    $W: 1200px;
    width: $W;
    height: 700px;

    .tools-select{
      margin-bottom: 20px;

      .tools-list{
        &:after{
          content: "";
          display: block;
          clear: both;
        }
        .tools-alone{
          $ww: ($W - 40px) / 3;
          $hh: 120px;
          width: $ww;
          height: $hh;
          border: 1px solid #d4d4d4;
          background: #f8f8f8;
          border-radius: 4px;
          margin-top: 20px;
          float: left;
          cursor: pointer;

          &:hover{
            figure{
              transform: scale(1.05) rotate(-5deg);
            }

            .intro h4{
              color: #000;
            }
          }

          &:nth-child(3n - 1){
            margin: 20px 20px 0 20px;
          }
          figure{
            $padding: 15px;
            padding: $padding;
            margin: 0;
            height: $hh;
            width: $hh;
            float: left;
            @extend %ani;

            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
              border: 1px solid #eee;
            }
          }

          .intro{
            width: $ww - $hh - 2px;
            height: $hh;
            float: left;
            display: flex;
            align-items: center;
            padding: 0 15px 0 0;
            color: #777;
            font-size: 0.8em;
            line-height: 1.25em;
            
            h4{
              font-size: 1em;
              @extend %ani;
            }
            p{
              margin: 10px 0;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .brief-list{
    $W: 1200px * 0.2 - 10px;
    width: $W;
  }
}
</style>
